{% extends 'base.html' %}

{% block title %}随机文本生成工具{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">随机文本生成工具</h1>
        <p class="text-gray-600">生成随机文本、段落、句子和列表，用于网站原型设计和测试</p>
    </div>

    <div class="bg-white shadow-md rounded-lg p-6">
        <form method="post">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">生成类型</label>
                    <div class="bg-gray-50 p-4 rounded-md">
                        <div class="space-y-3">
                            <label class="inline-flex items-center">
                                <input type="radio" name="type" value="paragraph" {{ 'checked' if params.type == 'paragraph' else '' }} class="form-radio h-4 w-4 text-blue-600">
                                <span class="ml-2 text-gray-700">段落</span>
                            </label>
                            <br>
                            <label class="inline-flex items-center">
                                <input type="radio" name="type" value="sentence" {{ 'checked' if params.type == 'sentence' else '' }} class="form-radio h-4 w-4 text-blue-600">
                                <span class="ml-2 text-gray-700">句子</span>
                            </label>
                            <br>
                            <label class="inline-flex items-center">
                                <input type="radio" name="type" value="word" {{ 'checked' if params.type == 'word' else '' }} class="form-radio h-4 w-4 text-blue-600">
                                <span class="ml-2 text-gray-700">单词</span>
                            </label>
                            <br>
                            <label class="inline-flex items-center">
                                <input type="radio" name="type" value="list" {{ 'checked' if params.type == 'list' else '' }} class="form-radio h-4 w-4 text-blue-600">
                                <span class="ml-2 text-gray-700">列表项</span>
                            </label>
                        </div>
                    </div>
                </div>

                <div>
                    <label for="count" class="block text-sm font-medium text-gray-700 mb-2">生成数量</label>
                    <div class="bg-gray-50 p-4 rounded-md">
                        <input type="number" id="count" name="count" min="1" max="50" value="{{ params.count or 3 }}" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <p class="mt-2 text-sm text-gray-500">
                            <span class="type-paragraph {{ 'hidden' if params.type != 'paragraph' and params.type }}">段落数量 (1-50)</span>
                            <span class="type-sentence {{ 'hidden' if params.type != 'sentence' and params.type }}">句子数量 (1-50)</span>
                            <span class="type-word {{ 'hidden' if params.type != 'word' and params.type }}">单词数量 (1-50)</span>
                            <span class="type-list {{ 'hidden' if params.type != 'list' and params.type }}">列表项数量 (1-50)</span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                    <i class="fas fa-random mr-2"></i>生成文本
                </button>
            </div>
        </form>

        {% if result %}
        <div class="mt-8">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">生成结果</h2>
            <div class="relative">
                <div id="result" class="w-full px-4 py-3 border border-gray-300 rounded-md bg-gray-50 whitespace-pre-wrap min-h-[200px]">{{ result }}</div>
                <button onclick="copyToClipboard('#result')" class="absolute top-2 right-2 px-2 py-1 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500">
                    <i class="fas fa-copy"></i>
                </button>
            </div>
        </div>
        {% endif %}
    </div>

    <div class="mt-8 bg-blue-50 rounded-lg p-4">
        <h3 class="text-lg font-medium text-blue-800 mb-2">使用场景</h3>
        <ul class="list-disc pl-5 text-blue-700 space-y-1">
            <li>网站和应用程序原型设计，快速填充占位内容</li>
            <li>测试文本换行、溢出和排版效果</li>
            <li>创建示例数据用于演示</li>
            <li>生成占位文本用于设计文档</li>
        </ul>
    </div>
</div>

<script>
function copyToClipboard(selector) {
    var text = document.querySelector(selector).innerText;
    var textarea = document.createElement('textarea');
    textarea.textContent = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    alert('已复制到剪贴板');
}

// 动态显示说明文本
document.addEventListener('DOMContentLoaded', function() {
    const typeRadios = document.querySelectorAll('input[name="type"]');
    const updateVisibility = () => {
        const selectedType = document.querySelector('input[name="type"]:checked').value;
        document.querySelectorAll('[class^="type-"]').forEach(el => {
            el.classList.add('hidden');
        });
        document.querySelector(`.type-${selectedType}`).classList.remove('hidden');
    };
    
    typeRadios.forEach(radio => {
        radio.addEventListener('change', updateVisibility);
    });
    
    // 初始化
    updateVisibility();
});
</script>
{% endblock %} 